<template>
  <div class="chat-list">
    <el-header>
      <el-row type="flex" justify="space-between" align="middle" style="width: 100%;">
        <el-col style="margin-top: 10px;">
          <h3 style="float: left;margin:0;">聊天记录</h3>

          <el-button class="new-chat" @click="startNewChat" style="float: right;">
            <el-icon><Plus/></el-icon>
            新对话
          </el-button>
        </el-col>
      </el-row>

    </el-header>
    <el-list class="history-list" >
      <router-link class="history-item" style="margin-bottom: 15px;" to="/">
        <el-icon size="30px" style="color: #085da2"><HomeFilled /></el-icon>

        <el-list-item >返回主页</el-list-item>
      </router-link>
      <div class="history-item"
           :class="{ 'active': currentChatId === chat.id }" @click="loadChat(chat.id)"
           v-for="chat in historyList" :key="chat.id">
        <el-icon><Message /></el-icon>
        <el-list-item >{{chat.title}}</el-list-item>
      </div>
    </el-list>
  </div>

</template>

<script setup>

import {ref} from 'vue';
import {HomeFilled, Message, Plus} from "@element-plus/icons-vue";

const currentChatId = ref('chat-1');


const startNewChat = () => {
  // 打开新聊天窗口
  console.log('开始新聊天')
}
const loadChat = (chatId) => {
  console.log('加载聊天记录', chatId)
  currentChatId.value = chatId;
}

const {historyList} = defineProps({
  historyList: {
    type: Array,
    default: [
      { id: 'chat-1', title: '记录1' },
      { id: 'chat-2', title: '记录2' },
      { id: 'chat-3', title: '记录3' }
    ]
  }
});
</script>

<style scoped>
.chat-list{
  width: 270px;
}


.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 1rem 1rem;
}
.history-list .history-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.3s;
  color: #000000;
  text-decoration: none;
}

.history-list .history-item:hover {
  background: rgba(37, 255, 189, 0.1);

}

.history-list .history-item.active {
  background: rgba(0, 255, 255, 0.3);
}

.new-chat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: #14ecdf;
  color: #8d6518;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.new-chat:hover {
  background: #72eadf;
}

</style>
